@extends('plugin.layout.base')
@section('add_css')
    <link rel="stylesheet" href="{{ ___('/admin/modules/treetable-lay/treetable.css') }}">
@endsection
@section('content')


    <div class="layui-card">
        <div class="layui-tab layui-tab-brief">
            <ul class="layui-tab-title">
                @if($navs)
                    @foreach($navs as $k=>$v)
                        <li class="{{ $v['id']==request()->input('group_type','news')?'layui-this':'' }}">
                            <a href="{{ action($controller.'@index',['group_type'=>$v['id']]) }}">{{ $v['name'] }}</a>
                        </li>
                    @endforeach
                @endif

            </ul>
            <div class="layui-tab-content">

                <div class="layui-tab-item layui-show">
                    @include('plugin.'.$controller_base_lower.'.form')
                    <table id="LAY-list-table" lay-filter="LAY-list-table"></table>
                </div>
            </div>
        </div>
    </div>


        @endsection
        @section('foot_js')
            @include('plugin.layout.ListConfig')
            <script>


                layui.use(['index', 'table', 'treetable'], function () {
                    var $ = layui.jquery;
                    var table = layui.table;
                    var treetable = layui.treetable;

                    // 渲染表格
                    layer.load(2);
                    table_id = "#LAY-list-table";
                    var tree = treetable.render({
                        treeColIndex: 3,
                        treeSpid: 0,
                        treeIdName: 'id',
                        treePidName: 'pid',
                        elem: table_id,
                        url: listConfig.index_url,
                        page: false,
                        response: {
                            statusName: 'code' //规定数据状态的字段名称，默认：code
                            , statusCode: 200 //规定成功的状态码，默认：0
                            , msgName: 'msg' //规定状态信息的字段名称，默认：msg
                            , countName: 'count' //规定数据总数的字段名称，默认：count
                            , dataName: 'data' //规定数据列表的字段名称，默认：data
                        },
                        where: {
                            limit: 10000,
                            sort: 'sort'
                        },
                        cols: [[
                            {type: 'checkbox'},
                             {field: 'id', width: 80, title: 'ID', sort: true},

                            {field: 'sort', width: 80, title: '排序', edit: 1},
                            {field: 'name', minWidth: 200, title: '名称'},
                            {field: 'seo_title', title: 'SEO标题', edit: 1},
                            {field: 'seo_key', title: '关键词', edit: 1},
                            {field: 'seo_desc', title: '描述', edit: 1},
``                            , {
                                field: 'is_checked', title: '状态', templet: function (d) {
                                    return layui_switch('is_checked', d, '启用|禁用')
                                }
                            },

                            {title: '操作', width: 250, align: 'center', toolbar: '#tpl-create-edit'}
                        ]],

                        done: function () {
                            layer.closeAll('loading');
                        }
                    });

                    $('#btn-expand').click(function () {
                        treetable.expandAll(table_id);
                    });

                    $('#btn-fold').click(function () {

                        treetable.foldAll(table_id);
                    });


                    $('#btn-search').click(function () {
                        var keyword = $('#edt-search').val();
                        var searchCount = 0;
                        $(table_id).next('.treeTable').find('.layui-table-body tbody tr td').each(function () {
                            $(this).css('background-color', 'transparent');
                            var text = $(this).text();

                            if (keyword != '' && text.indexOf(keyword) >= 0) {
                                $(this).css('background-color', 'rgba(250,230,160,0.5)');
                                if (searchCount == 0) {
                                    treetable.expandAll(table_id);
                                    $('html,body').stop(true);
                                    $('html,body').animate({scrollTop: $(this).offset().top - 150}, 500);
                                }
                                searchCount++;
                            }
                        });
                        if (keyword == '') {
                            layer.msg("请输入搜索内容", {icon: 5});
                        } else if (searchCount == 0) {
                            layer.msg("没有匹配结果", {icon: 5});
                        }
                    });
                });


            </script>
@endsection